<template>
    <div>
        <el-card>
            <div slot="header" class="clearfix">
                <el-tag type="primary" v-if="form.groupName">{{form.groupName}}</el-tag>
                <span class="title">{{formTitle}}</span>
            </div>
            <div>
              <h3>
                  <i class="el-icon-edit-outline"></i>
                  基础信息
              </h3>
              <div style="margin-top: 10px">
                  <el-form :model="form" :rules="rules" ref="form" :disabled="mode==='view'">
                    <el-form-item prop="groupId" label="分组ID" :label-width="formLabelWidth" required>
                        <el-input v-model="form.groupId" size="small" placeholder="请输入分组ID" :disabled="mode!=='add'"></el-input>
                    </el-form-item>
                     <el-form-item prop="groupName" label="分组名称" :label-width="formLabelWidth" required>
                        <el-input v-model="form.groupName" size="small" placeholder="请输入分组名称"></el-input>
                    </el-form-item>
                     <el-form-item prop="instanceIps" label="网关实例" :label-width="formLabelWidth" required>
                        <el-input v-model="form.instanceIps" type="textarea" rows="4" size="small" placeholder="请输入网关实例"></el-input>
                        <span>请输入网关实例IP或网关服务名，多个可用逗号分隔，不能填写127.0.0.1</span>
                    </el-form-item>
                  </el-form>
              </div>
              <h3>
                  <i class="el-icon-edit-outline"></i>
                  插件配置
              </h3>
              <div style="margin: 10px 0">
                  <span style="font-size: 10px">网关分组级别的插件对分组下所有路由都生效</span>
                  <div style="margin-top: 20px">
                       <el-button type="primary" plain size="small" @click="addPlugin" :disabled="mode==='view'">添加插件</el-button>
                  </div>
                   <el-collapse style="padding: 20px">
                    <el-collapse-item :name="item.id" v-for="(item,index) in form.gatewayGroupPlugins" :key="index" :disabled="!item.instruction || mode==='view'">      
                         <template slot="title">
                            {{index+1}} #【路由级别】{{item.chnName}}
                            <el-tag style="margin: 0 10px" type="success" size="small">执行顺序</el-tag>
                             <el-input-number v-model="item.order" size="mini" controls-position="right" :disabled="mode==='view'"></el-input-number>
                             <template v-if="item.instion">
                                 <el-tag style="margin: 0 10px" type="success" size="small">配置</el-tag>
                                 <el-tooltip class="item" effect="dark" :content="item.instruction" placement="top">
                                    <div>
                                        <i class="header-icon el-icon-info"></i>
                                        <el-button type="text">使用说明</el-button>
                                    </div>
                                 </el-tooltip>
                             </template>

                             <div class="detele-wrap"> 
                                <el-button type="danger" icon="el-icon-delete" circle size="mini" :disabled="mode==='view'"></el-button>
                              </div>
                        </template>
                         <template v-if="item.config">
                            <el-form :model="pluginForm">
                              <el-form-item v-for="item2 in JSON.parse(item.config)" :key="item2.field" :label="item2.label" :rules="item2.rules" :prop="item2['field']">
                                 <div v-if="item2.component==='textarea'">
                                    <el-input :rows="2" size="small" v-model="item2['field']" type="textarea"></el-input>
                                    <span style="font-size: 10px;opacity: .7">{{item2.desc}}</span>
                                </div>
                                 <div v-if="item2.component==='select'">
                                   <el-select size="small" v-model="item2['field']">
                                     <el-option v-for="(item3,index3) in item2.options" :key="index3" :label="item3.label" :value="item3.value"></el-option>
                                   </el-select>
                                </div>
                                 <div v-if="item2.component==='checkbox'">
                                    <div v-for="item3 in item2.options" :key="item3.label">
                                          <el-checkbox v-model="item2['field']">{{item3.label}}</el-checkbox>
                                    </div>
                                    <span style="font-size: 10px;opacity: .7">{{item2.desc}}</span>
                                </div>
                                <div v-if="item2.component==='input'">
                                    <el-input size="small" v-model="item2['field']"></el-input>
                                    <span style="font-size: 10px;opacity: .7">{{item2.desc}}</span>
                                </div>
                              </el-form-item>
                            </el-form>
                        </template>
                    </el-collapse-item>
               </el-collapse>
              </div>
              <el-divider></el-divider>
               <div style="text-align: right;margin: 10px 0" v-if="mode!=='view'">
                    <el-button type="primary" @click="handleSubmit('form')" size="small">保存</el-button>                        
                    <el-button @click="handleCancel" size="small">取消</el-button>
               </div>
            </div>
        </el-card>
        <el-drawer title="添加插件" :visible.sync="drawer" size="50%" direction="rtl">
            <div>
                <div style="padding: 10px">
                    <el-checkbox v-model="checkedList" @change="handleCheckAllChange">全选</el-checkbox>
                </div>                                           
               <el-collapse style="padding: 20px">
                    <el-collapse-item :name="item.id" v-for="item in pluginList" :key="item.id" :disabled="!item.instruction">                     
                        <template slot="title">
                            <el-checkbox v-model="item.check">{{item.chnName}}</el-checkbox>
                             <template v-if="item.instruction">
                                 <el-tag style="margin: 0 10px" type="success" size="small">配置</el-tag>
                                 <el-tooltip class="item" effect="dark" :content="item.instruction" placement="top">
                                    <div>
                                        <i class="header-icon el-icon-info"></i>
                                        <el-button type="text">使用说明</el-button>
                                    </div>
                                 </el-tooltip>
                             </template>
                        </template>
                        <template v-if="item.config">
                            <el-form disabled>
                              <el-form-item v-for="item2 in JSON.parse(item.config)" :key="item2.field" :label="item2.label" :rules="item2.rules">
                                 <div v-if="item2.component==='textarea'">
                                    <el-input :rows="2" type="textarea"></el-input>
                                    <span>{{item2.desc}}</span>
                                </div>
                                 <div v-if="item2.component==='select'">
                                   <el-select size="small" v-model="addForm.statusCode">
                                     <el-option v-for="(item3,index3) in item2.options" :key="index3" :label="item3.label" :value="item3.value"></el-option>
                                   </el-select>
                                </div>
                                 <div v-if="item2.component==='checkbox'">
                                    <div v-for="item3 in item2.options" :key="item3.label">
                                          <el-checkbox :label="item3.label"></el-checkbox>
                                    </div>
                                    <span>{{item2.desc}}</span>
                                </div>
                                <div v-if="item2.component==='input'">
                                    <el-input></el-input>
                                    <span>{{item2.desc}}</span>
                                </div>
                              </el-form-item>
                            </el-form>
                        </template>
                    </el-collapse-item>
                     <div style="text-align: right;margin-top: 10px;">
                        <el-button type="primary" @click="handleAddPlugin" size="small">添加</el-button>
                        <el-button @click="drawer = false" size="small">取消</el-button>
                    </div>
               </el-collapse>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { getPluginListAll,save,getGroupDetail,update } from '@/api/getway/group.api.js'
    export default {
        name: 'GroupDetail',
        data() {
            return {
                addForm: {},
                formLabelWidth: "120px",
                form: {
                    gatewayGroupPlugins: []
                },
                drawer: false,
                pluginList: [],
                rules: {
                    groupId: [ { required: true, message: '请输入分组ID', trigger: 'blur' }],
                    groupName: [ { required: true, message: '请输入分组名称', trigger: 'blur' }],
                    instanceIps: [ { required: true, message: '请输入网关实例', trigger: 'blur' }],
                },
                checkedList: [],
                mode: 'add',
                formTitle: '新增网关分组',
                pluginForm: {}
            }
        },
        async mounted() {
            this.mode = this.$route.params.detail;
            if(this.mode === 'edit') {
                this.formTitle = '修改网关分组'
            }else if(this.mode === 'view') {
                this.formTitle = '查看网关分组'
            }
            if(this.$route.query.id) {
                const result = await getGroupDetail(this.$route.query.id);
                if(result.code === 200) {
                    this.form = result.data;
                }
            }
        },
        methods: {
            async addPlugin() {
                this.drawer = true;
                const result = await getPluginListAll();
                if(result.code === 200) {
                    this.pluginList = result.data;
                }
            },
            handleCancel() {
                this.$router.push('/gateway/group');
            },
            handleAddPlugin() {
                  this.form.gatewayGroupPlugins.push(...this.pluginList.filter(item=>item.check));
                  this.drawer = false;
            },
            handleCheckAllChange(val) {
                if(val) {
                    this.pluginList.forEach(item=>item.check=true)
                }else {
                    this.pluginList.forEach(item=>item.check=false)
                }
             },
            handleChange(obj,value) {
                console.log(obj,value);
            },
            handleSubmit(formName) {
                 this.$refs[formName].validate(async(valid) => {
                 if (valid) {
                        this.form.gatewayGroupPlugins.forEach(item=>{
                            item.plugin = item.id;
                            delete item.id;
                        })
                        if(this.form.id) {
                            const result = await update(this.form);
                            if(result.code === 200) {
                            this.$message.success('保存成功');
                            this.$router.push('/gateway/group');
                        }else {
                            const result = await save(this.form);
                            if(result.code === 200) {
                                this.$message.success('保存成功');
                                this.$router.push('/gateway/group');
                            }
                        }
                    }
                      
                } else {
                    return false;
                }
              });
            }
        }
    }
</script>

<style lang="scss" scoped>
.title {
    margin-left: 10px;
    font-weight: 600;
    font-size: 16px;
}
</style>